import {Component} from "react";
import "./index.less";
import Chat from '../chat/index'
import Card from '../card/index'
import Taro from '@tarojs/taro'
import {AtInput, AtForm} from 'taro-ui'
import Slide from 'react-reveal/Slide';
import {Image, View} from "@tarojs/components";
import {AtTabs, AtTabsPane} from 'taro-ui'
import {AtButton} from 'taro-ui'

export default class Index extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {

  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  state = {
    login: true,
    username: '',
    password: '',
    email: '',
    current: 0
  }


  render() {
    let login = (
      <View className={'login'}>
        <AtInput
          className={'sessionInput'}
          name='value'
          type='text'
          placeholder='username'
          value={this.state.username}
          onChange={this.usernameChange.bind(this)}
        />
        <AtInput
          className={'sessionInput'}
          name='value'
          type='password'
          placeholder='password'
          value={this.state.password}
          onChange={this.passwordChange.bind(this)}
        />
        <AtButton type={'secondary'} onClick={()=>this.onLogin()}>Login</AtButton>
      </View>
    )
    let register = (
      <View className={'register'}>
        <AtInput
          className={'sessionInput'}
          name='value'
          type='mail'
          placeholder='e-mail'
          value={this.state.email}
          onChange={this.emailChange.bind(this)}
        />
        <AtInput
          className={'sessionInput'}
          name='value'
          type='text'
          placeholder='username'
          value={this.state.username}
          onChange={this.usernameChange.bind(this)}
        />
        <AtInput
          className={'sessionInput'}
          name='value'
          type='password'
          placeholder='password'
          value={this.state.password}
          onChange={this.passwordChange.bind(this)}
        />
        <AtButton type={'secondary'} onClick={() => this.onRegister()}>Register</AtButton>
      </View>
    )
    const tabList = [{title: 'Login'}, {title: 'Register'}]
    return (
      <View>
        <Image className={'loginBackground'}
               src={'https://pic.quanjing.com/kz/gz/QJ7100366257.jpg@!350h'}/>
        <AtTabs className={'tab'} current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}
                swipeable>
          <AtTabsPane current={this.state.current} index={0}>
            {login}
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            {register}
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }

  onLogin() {
    Taro.redirectTo({
      url: '/pages/index/index'
    })
  }

  onRegister() {
    Taro.redirectTo({
      url: '/pages/index/index'
    })
  }

  usernameChange(value) {
    this.setState({
      username: value
    })
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }

  passwordChange(value) {
    this.setState({
      password: value
    })
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }

  emailChange(value) {
    this.setState({
      email: value
    })
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value
  }

  handleClick(value) {
    this.setState({
      current: value
    })
  }
}
